<template>
	<div class="mian_part">
		<div class="top_part">
			<div class="left_part">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
				</el-tabs>
			</div>
			<div class="right_part">
				<el-link
					style="margin-right: 20px"
					:underline="false"
					:type="item.active ? 'primary' : 'info'"
					v-for="(item, index) in dateList"
					:key="index"
					@click="selectDate(item)"
					>{{ item.label }}</el-link
				>
				<el-date-picker
					style="margin-right: 20px"
					v-model="dateVal"
					format="YYYY年MM月DD日"
					valueFormat="YYYY-MM-DD"
					type="daterange"
					range-separator="~"
				/>
			</div>
		</div>
		<div class="chart_part">
			<view v-if="activeName == '1'">
				<BarEchart
					id="businessHandle"
					ref="businessHandle"
					isXYReplace:businessHandle.isXYReplace
					dataNameList:businessHandle.businessHandle
					dataList:businessHandle.dataList
				></BarEchart>
			</view>
			<view v-if="activeName == '2'">
				<table border="1" cellpadding="5" cellspacing="0" width="100%">
					<tr>
						<td>区划</td>
						<td>能力完好</td>
						<td>轻度失能</td>
						<td>中度失能</td>
						<td>重度失能</td>
						<td>完全失能</td>
						<!-- <td>80周岁及以上老人</td>
						<td>百岁老人</td>
						<td>低保老年人</td>
						<td>特困老年人</td>
						<td>独居老年人</td> -->
					</tr>
					<tr v-for="(item, index) in serverObjData" :key="index">
						<td>{{ item.areaName }}</td>
						<td>{{ item.cultureDegreeValue1 || 0 }}</td>
						<td>{{ item.cultureDegreeValue2 || 0 }}</td>
						<td>{{ item.cultureDegreeValue3 || 0 }}</td>
						<td>{{ item.cultureDegreeValue4 || 0 }}</td>
						<td>{{ item.cultureDegreeValue5 || 0 }}</td>
					</tr>
				</table>
			</view>
			<view v-if="activeName == '3'">
				<table border="1" cellpadding="5" cellspacing="0" width="100%">
					<tr>
						<td>区划</td>
						<td>本科及以上</td>
						<td>大专</td>
						<td>高中和中专</td>
						<td>初中</td>
						<td>小学</td>
						<td>文盲</td>
						<td>有职业资格证</td>
					</tr>
					<tr v-for="(item, index) in practitionersData" :key="index">
						<td>{{ item.areaName }}</td>
						<td>{{ item.cultureDegreeValue5 }}</td>
						<td>{{ item.cultureDegreeValue4 }}</td>
						<td>{{ item.cultureDegreeValue3 }}</td>
						<td>{{ item.cultureDegreeValue2 }}</td>
						<td>{{ item.cultureDegreeValue1 }}</td>
						<td>{{ item.cultureDegreeValue0 }}</td>
						<td>{{ item.certificateValue }}</td>
					</tr>
				</table>
			</view>
			<view v-if="activeName == '4'">
				<table border="1" cellpadding="5" cellspacing="0" width="100%">
					<tr>
						<td>区划</td>
						<td>政府购买</td>
						<td>家庭养老床位</td>
						<td>养老服务时间银行</td>
						<td>紧急呼叫</td>
						<td>站点服务</td>
						<td>居家上门绩效服务</td>
						<td>银发顾问服务</td>
					</tr>
					<tr v-for="(item, index) in serverOrder" :key="index">
						<td>{{ item.areaName }}</td>
						<td>{{ item.businessTypeValue1 }}</td>
						<td>{{ item.businessTypeValue2 }}</td>
						<td>{{ item.businessTypeValue3 }}</td>
						<td>{{ item.businessTypeValue4 }}</td>
						<td>{{ item.businessTypeValue5 }}</td>
						<td>{{ item.businessTypeValue6 }}</td>
						<td>{{ item.businessTypeValue7 }}</td>
					</tr>
				</table>
			</view>
			<view v-if="activeName == '5'">
				<BarEchart
					id="assessData"
					ref="assessData"
					isXYReplace:assessData.isXYReplace
					dataNameList:assessData.businessHandle
					dataList:assessData.dataList
				></BarEchart>
			</view>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import BarEchart from '@/components/BarEchart/index.vue'
import apiMod from '@/apiMod/index'
import { getStore } from '@/utils/store'

let activeName = ref('1')
const handleClick = (e) => {}
let dateList = ref([
	{ label: '今日', active: true },
	{ label: '本周', active: false },
	{ label: '本月', active: false },
	{ label: '全年', active: false },
])
let tabList: any = ref([
	{ label: '业务办理', name: '1' },
	{ label: '服务对象', name: '2' },
	{ label: '从业人员', name: '3' },
	{ label: '服务工单', name: '4' },
	{ label: '评估数据', name: '5' },
])
let dateVal: any = ref([])
let businessHandle = ref({
	isXYReplace: true,
	dataNameList: [],
	dataList: [{data:[]},{data:[]},{data:[]},{data:[]},{data:[]}],
})
let assessData = ref({
	isXYReplace: false,
	dataNameList: [],
	dataList: [{data:[]},{data:[]}],
})
let timeBetween = ref(undefined)
let currentRole = ref('')
// 获取业务办理统计
const getBusnissHandleData = () => {
	apiMod.view_bscStatistics_businessProcessing({ timeBetween: timeBetween.value,role:currentRole.value }).then((res) => {
		if (res.code == 0 && res.data) {
            businessHandle.value = {
                isXYReplace: true,
                dataNameList: [],
                dataList: [{data:[]},{data:[]},{data:[]},{data:[]},{data:[]}],
            }
			let list1 = res.data.map((el) => {
				return el.name
			})
            businessHandle.value.dataNameList = list1
			businessHandle.value.dataList[0].data = res.data.map((el) => {
				return el.orderOnlineValue
			})
			businessHandle.value.dataList[1].data = res.data.map((el) => {
				return el.agingModificationServicesValue
			})
			businessHandle.value.dataList[2].data = res.data.map((el) => {
				return el.venerableGoldValue
			})
			businessHandle.value.dataList[3].data = res.data.map((el) => {
				return el.emergencyCallServiceValue
			})
			businessHandle.value.dataList[4].data = res.data.map((el) => {
				return el.familyNursingBedValue
			})
		}
	})
}
// 服务对象统计
let serverObjData: any = ref({})
const getServerObjData = () => {
	apiMod.view_bscStatistics_serviceObject({ timeBetween: timeBetween.value,role:currentRole.value }).then((res) => {
		if (res.code == 0 && res.data) {
			serverObjData.value = res.data
		}
	})
}
// 从业人员
let practitionersData: any = ref({})
const getPractitionersData = () => {
	apiMod.view_bscStatistics_practitioners({ timeBetween: timeBetween.value,role:currentRole.value }).then((res) => {
		if (res.code == 0 && res.data) {
			practitionersData.value = res.data
		}
	})
}
// 服务工单
let serverOrder: any = ref({})
const getServerOrder = () => {
	apiMod.view_bscStatistics_serviceOrder({ timeBetween: timeBetween.value,role:currentRole.value }).then((res) => {
		if (res.code == 0 && res.data) {
			serverOrder.value = res.data
		}
	})
}
// 评估数据
const getAssessData = () => {
	apiMod.view_bscStatistics_evaluationData({ timeBetween: timeBetween.value,role:currentRole.value }).then((res) => {
		if (res.data) {
            assessData.value = {
                isXYReplace: false,
                dataNameList: [],
                dataList: [{data:[]},{data:[]}],
            }
			assessData.value.dataNameList = res.data.map((el) => {
				return el.name
			})
			assessData.value.dataList[0].data = res.data.map((el) => {
				return el.elderlyAssessBaseValue
			})
			assessData.value.dataList[1].data = res.data.map((el) => {
				return el.serviceOrgAssessValue
			})
		}
	})
}

watch(
	activeName,
	(val) => {
		if (val == '1') {
			getBusnissHandleData()
		} else if (val == '2') {
			getServerObjData()
		} else if (val == '3') {
			getPractitionersData()
		} else if (val == '4') {
			getServerOrder()
		} else {
			getAssessData()
		}
	}
)
// 计算时间区间
const timeSlotChange = (val) => {
	let startTime, endTime
	let now = new Date() //当前日期
	let nowDayOfWeek = now.getDay() //今天本周的第几天
	let nowDay = now.getDate() //当前日
	let nowMonth = now.getMonth() //当前月
	let nowYear = now.getFullYear() //当前年
	let jd = Math.ceil((nowMonth + 1) / 3)
	switch (val) {
		case '本周':
			startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek).toLocaleDateString()
			endTime = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek).toLocaleDateString()
			break
		case '本月':
			startTime = new Date(nowYear, nowMonth, 1).toLocaleDateString()
			endTime = new Date(nowYear, nowMonth + 1, 0).toLocaleDateString()
			break
		case '本季度':
			startTime = new Date(nowYear, (jd - 1) * 3, 1).toLocaleDateString()
			endTime = new Date(nowYear, jd * 3, 0).toLocaleDateString()
			break
		case '全年':
			startTime = new Date(nowYear, 0, 1).toLocaleDateString()
			endTime = new Date(nowYear, 11, 31).toLocaleDateString()
			break
	}
	let startTimeList = startTime.split('/').map(Number)
	startTimeList.forEach((el, index) => {
		if (el < 10) {
			startTimeList[index] = '0' + el
		}
	})
	startTime = startTimeList.join('-')
	//
	let endTimeList = endTime.split('/').map(Number)
	endTimeList.forEach((el, index) => {
		if (el < 10) {
			endTimeList[index] = '0' + el
		}
	})
	endTime = endTimeList.join('-')
	return startTime + ',' + endTime
}

const selectDate = (item) => {
	dateList.value.forEach((el) => {
		if (el.label == item.label) {
			el.active = true
		} else {
			el.active = false
		}
	})

	if (item.label == '今日') {
		timeBetween.value = undefined
	} else if (item.label == '本周') {
		timeBetween.value = timeSlotChange(item.label)
	} else if (item.label == '本月') {
		timeBetween.value = timeSlotChange(item.label)
	} else if (item.label == '全年') {
		timeBetween.value = timeSlotChange(item.label)
	}
}
// 监听时间选择器时间
watch(dateVal, (newVal) => {
	if (newVal) {
		dateList.value.forEach((el) => {
			el.active = false
		})
		timeBetween.value = newVal.join(',')
	} else {
		dateList.value[0].active = true
		timeBetween.value = undefined
	}
})

const judgeRole = ()=>{
    const STAFF_LIST = ['OST_CONGYE', 'ylzzjggly', 'sqgly', 'jdgly', 'sjgly', 'qjgly', 'ROLE_ADMIN']
	let detailUserInfo = getStore('detailUserInfo')
	console.log('-=-=-', detailUserInfo)
	
	if (detailUserInfo.roleCodeList.lenght == 1 && detailUserInfo.roleCodeList[0] == STAFF_LIST[0]) {
        // 判断是什么角色，管理员看这些
	    // 如果只有机构从业人员，评估数据，服务工单
        tabList.value =[
            { label: '服务对象', name: '2' },
            { label: '从业人员', name: '3' },
            { label: '服务工单', name: '4' },
            { label: '评估数据', name: '5' },
        ]
        currentRole.value = STAFF_LIST[0]
	}else if (detailUserInfo.roleCodeList.lenght == 1 && detailUserInfo.roleCodeList.includes(STAFF_LIST[1])) {
        // 只有机构用户的情况
        tabList.value = [
            { label: '服务对象', name: '2' },
            { label: '从业人员', name: '3' },
            { label: '服务工单', name: '4' },
            { label: '评估数据', name: '5' },
        ]
        currentRole.value = STAFF_LIST[0]
	}else if (
		!detailUserInfo.roleCodeList.includes(STAFF_LIST[0]) &&
		detailUserInfo.roleCodeList.includes(STAFF_LIST[1]) &&
		detailUserInfo.roleCodeList.lenght != 1
	) {
        // 机构用户, 服务对象、从业人员、服务工单
	    // 有机构用户角色，但是没有机构从业人员的情况
        tabList.value = [
            { label: '业务办理', name: '1' },
            { label: '服务对象', name: '2' },
            { label: '从业人员', name: '3' },
            { label: '服务工单', name: '4' },
            { label: '评估数据', name: '5' },
        ]
        currentRole.value = 'qjgly'
	}else{
        tabList.value = [
            { label: '业务办理', name: '1' },
            { label: '服务对象', name: '2' },
            { label: '从业人员', name: '3' },
            { label: '服务工单', name: '4' },
            { label: '评估数据', name: '5' },
        ]
        currentRole.value = 'qjgly'
    }
    console.log(123, tabList.value)
	getBusnissHandleData()
}
onMounted(() => {
	judgeRole()
})
</script>
<style scoped lang="scss">
.mian_part {
	height: 100%;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	background-color: white;
	border-radius: 15px;
	.top_part {
		height: 80px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left_part {
			width: 45%;
			// display: flex;
			// flex-direction: row;
			// justify-content: flex-start;
			// align-items: center;
		}
		.right_part {
			width: 45%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
		}
	}
	.chart_part {
		height: calc(100% - 80px);
		width: 100%;
	}
}
</style>
